import createEditor from './editor'
import logo from './logo.png'

// editor
const editor = createEditor()
document.body.append(editor)

// logo
const img = new Image()
img.src = logo
img.width = 400
img.height = 200
document.body.append(img)


// JS模块热替换
// createEditor 会即时更新
// 由于这个方法是返回一个页面元素，main.js将元素添加到body中
// 所以它的热替换方案如下：
// 1. 将元素存储在一个变量中，用于在模块更新后获取之前元素的状态信息
// 2. 删除之前的页面元素
// 3. 重新创建一个元素，将之前元素的状态信息添加到新的元素中
// 4. 重新在body中添加
// 5. 更新存储的元素
let lastEditor = editor
if (module.hot) {
  module.hot.accept('./editor', () => {
    // console.log('editor 模块更新了，需要这里手动处理热替换逻辑')
    const value = lastEditor.innerHTML
    document.body.removeChild(lastEditor)
    const newEditor = createEditor()
    newEditor.innerHTML = value
    document.body.append(newEditor)
    lastEditor = newEditor
    
    // console.log1(111)
  })
}

// 图片模块热替换
// if (module.hot) {
  module.hot.accept('./logo.png', () => {
    img.src = logo
    console.log(logo)
  })
// }
